<script lang="ts" setup>
import { convertLevel } from '@/utils'
import type { IProduct } from '@/typings/interface'

const { item } = defineProps<{ item: IProduct }>()
const { toDetail } = useVideo()

// 级别映射
function getType() {
  return convertLevel(item.course_level)
}

function onClick() {
  toDetail(item.id)
}
</script>

<template>
  <view class="item" @click="onClick()">
    <image :src="item.cover_img" mode="scaleToFill" />
    <view class="right">
      <text class="title">
        {{ item.title }}
      </text>
      <view class="second">
        <text>级别：{{ getType() }}</text>
        <image v-for="i in 5" :key="i" src="@/static/images/icons/common/fire.png" mode="scaleToFill" />
      </view>
      <view class="user-price">
        <view class="user">
          <image src="@/static/images/icons/common/user.png" mode="scaleToFill" />
          <text>{{ item.buy_num }}</text>
        </view>
        <view class="price">
          <view>
            <text class="dollor">
              ¥
            </text>
            <text class="price">
              {{ item.amount }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.item {
  width: 100%;
  display: flex;
  margin-bottom: 40rpx;

  image {
    width: 300rpx;
    height: 175rpx;
    border-radius: 10rpx;
    flex-shrink: 0;
  }

  .right {
    display: flex;
    margin-left: 15rpx;
    flex-direction: column;
    justify-content: space-between;

    .title {
      color: #333333;
      font-size: 27rpx;

      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }

    .second {
      display: flex;
      align-items: center;

      text {
        color: #7f7f7f;
        font-size: 24rpx;
        margin-right: 10rpx;
      }

      image {
        width: 27rpx;
        height: 27rpx;
        margin-right: 5rpx;
      }
    }

    .user-price {
      display: flex;
      justify-content: space-between;

      .user {
        display: flex;
        align-items: center;

        image {
          width: 32rpx;
          height: 32rpx;
        }

        text {
          font-size: 28rpx;
          color: #7f7f7f;
          margin-left: 5rpx;
        }
      }

      .price {
        display: flex;
        align-items: baseline;

        .dollor {
          font-size: 24rpx;
        }

        &>view {
          display: flex;
          align-items: baseline;
          margin-left: 20rpx;

          &:last-child {
            color: #e51b11;
            font-size: 40rpx;
          }
        }
      }
    }
  }
}
</style>
